<template>
    <div class="app">
    <h2>Vue路由测试</h2>
        <!-- 导航区 -->
      <div class="navigate">
        <RouterLink :to="{name:'home'}" active-class="active">首页</RouterLink>
        <RouterLink to="/news" active-class="active">新闻</RouterLink>
        <RouterLink to="/about" active-class="active">关于</RouterLink>
    </div> 
     <!--展示区  -->
     <div class="main-showzs">
        <RouterView></RouterView>
     </div>
    </div>
    
</template>

<script lang="ts" setup>
import {RouterView,RouterLink} from 'vue-router'

</script>

<style scoped>
.app{

    display: flex;
    flex-flow: column;
    align-items: center;

    h2{
        width: 100%;
        background-color: #ccc;
        text-align: center;
        height: 50px;
        line-height: 50px;
        border-radius: 10px;
    }
    .navigate{
        width: 100%;
        height: 100px;
        display: flex;
        text-align: center;
        align-items: center;
        justify-content: space-evenly;

        a{
            background-color: #949292;
            color: white;
            width: 80px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            text-decoration: none;     
        }
        .active{
                background-color: rgba(31, 164, 71, 0.603);
                color: rgba(233, 151, 9, 0.982);
            }
    }
    .main-showzs{
        width: 80%;
        border: 1px solid #333;
        border-radius: 10px;
        height: 800px;
    }

}
</style>